<template>
<Modal
	v-model="show"
	:width="640"
	@on-ok="save"
	>
	<div slot="header" class="header">
		<h3>常用菜单设置</h3>
		<p>通过点击勾选可添加菜单为管理常用操作项，最多添加9个</p>
	</div>
	<div>
		<div class="menu_box">
			<CheckboxGroup v-model="sels">
			<dl v-for="val in list" class="menu_list">
				<dt>{{val.label}}</dt>
				<dd>
					<Checkbox v-for="(child,index) in val.children"  :label="child.name" :key="child.name">
						{{child.label}}
					</Checkbox>
				</dd>
			</dl>
			</CheckboxGroup>
		</div>
	</div>
	
</Modal>
</template>

<script>


export default {
	name:'menu_box',
    data () {
        return {
			show:false,
			list:[],
			sels:[]
        };
    },
	props:['value','data','menus'],
	created(){
		this.show = this.value;
		
		
		this.init();
		
	},
	watch:{
		value(val){
			this.show = val;
			
			if(val){
				this.init();
				this.sels = []
				this.menus.forEach(item=>{
					this.sels.push(item.name);
				});
			}
		},
		show(val){
			this.$emit('input',val);
		},
		sels(val){
			if(val.length>9){
				this.sels.splice(0,1);
			}
		}
	},
    methods: {
		init(){
			var list = this.data;
			this.list = [];
			for(var i=0;i<list.length;i++){
			
				var children = [];
				var ls_children = list[i].children;
				
				for(var j=0;j<ls_children.length;j++){
					var ls_child = ls_children[j].children;
					if(ls_child){
						for(var k=0;k<ls_child.length;k++){
						
							children.push({
								name:ls_child[k].name,
								label:ls_child[k].label,
							});
						}
					}
					else{
						children.push({
							name:ls_children[j].name,
							label:ls_children[j].label,
						});
					}
				}
				
				var ls_data = {
					name:list[i].name,
					label:list[i].label,
					children:children,
				};
				this.list.push(ls_data);
			}
		},
		save(){
		
			var self = this;
			var postdata = {
				info:this.sels
			};
			
			Whttp.load('System/Menus/save',postdata,function(result){
				self.$emit('success',result);
				self.show = false;
			});
		}
    }
};
</script>

<style scoped>
.header{}
.header h3{
	    font-size: 16px;
    margin-bottom: 5px;
}
.header p{
	color: #999;
    font-weight: normal;
    font-size: 12px;
}
.menu_box{overflow: hidden;}
.menu_list{
	float: left;
    width: 25%;
    min-height: 190px;
}
.menu_list dt{
	color: #1ABC9C;
    font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';
    font-weight: 700;
    margin-bottom: 10px;
}
.menu_list dd{}
.menu_list dd label{
	    display: block;
    margin-bottom: 6px;
}
</style>